<template>
	<view class="login_box">
		<view class="login_logo">
			<image class="login_img" src="@/static/logo.png" mode=""></image>
		</view>
		<view class="input_box">
			<input type="text" disabled :placeholder="referrer" placeholder-style="color:#bebfc3">
			<input type="number" placeholder="请输入手机号" placeholder-style="color:#bebfc3" v-model="phone">
			<input type="text" placeholder="请输入姓名" placeholder-style="color:#bebfc3" v-model="namex">
			<view class="yzm_box">
				<input type="safe-password" placeholder="请输入手机验证码" placeholder-style="color:#bebfc3" v-model="code">
				<text @click="getCode()">{{codetext}}</text>
			</view>
			<input type="idcard" placeholder="请输入身份证号" placeholder-style="color:#bebfc3" v-model="idcard">
			<input type="text" placeholder="请设置您的登录密码" placeholder-style="color:#bebfc3" v-model="Login_pwd">
			<u-popup :show="send_show" @close="close" mode="bottom">
				<screen @send="send" :list="agentlist" :title="agenttit"></screen>
			</u-popup>
			<!-- <input type="text" :placeholder="agenttext" placeholder-style="color:#bebfc3" :disabled="true"
				@click="send_show = true"> -->
		</view>
		<view class="label">
			<checkbox-group @change="radioChange">
				<checkbox value="checked" :checked="checked" style="transform:scale(0.7)" />签订合同 <text
					@click="show = true">《平台推广及代理合作协议》</text>
			</checkbox-group>
		</view>
		<view class="Modal" v-show="show" :class="show? 'visible' :''">
			<view class="Modal_tit">
				<h3>合作协议</h3>
				<p v-html="regis"></p>
			</view>
			<view class="Modal_cf" @click="contract">同意</view>
		</view>
		<view class="login_button" v-if="checked" @click="verify">
			注册
		</view>
		<view class="login_button" style="background-color: #d1d1d1;" v-else>
			注册
		</view>
	</view>
</template>

<script>
	import screen from '@/component/screen.vue'
	export default {
		data() {
			return {
				show: false,
				send_show: false,
				referrer: '请输入推荐人', //推荐人
				namex: '', //姓名
				phone: '', //手机号
				idcard: '', //身份证号
				code: '', //验证码
				Login_pwd: '', //密码
				codetext: '获取验证码',
				agenttext: '请选择代理产品',
				agenttext_id: '', //代理产品ID
				isDisabled: true,
				show: false,
				agentlist: [], //代理列表
				agenttit: '', //代理标题
				checked: false, //合同是否选中
				e: {},
				regis: {},
				platform: 2,
			}
		},
		components: {
			screen
		},
		onLoad(e) {
			this.e = e
			if (e.platform) {
				this.platform = e.platform
			}
			this.referrer_f()
			// this.agent_list()
			this._getAgree()
		},
		onShow() {
			let that = this
			uni.$on('show', function(data) {
				that.checked = data
			})
		},
		methods: {
			radioChange(e) {
				if (e.detail.value != null && e.detail.value.length > 0) {
					this.checked = true
				} else {
					this.checked = false
				}
			},
			// 查找推荐人
			async referrer_f() {
				// 发送请求
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getReferrer',
					data: {
						id: this.e.id,
						type: this.e.type
					}
				});
				if (res.code == 200) {
					this.referrer = res.data
				}
			},
			//获取验证码
			getCode() {
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				let that = this;
				// 防止多次重复点击
				if (!that.isDisabled) {
					return false;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) { //校验手机号码是否有误
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.codetext = "发送中..." //发送验证码
				this.isDisabled = false;
				//示例用定时器模拟请求效果
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				setTimeout(() => {
					this.setTimer();
				}, 1000)
			},
			// 验证码的定时器
			setTimer() {
				// 发送请求
				this.V_Code()
			},
			// 获取验证码请求
			async V_Code() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/send',
					data: {
						mobile: this.phone,
						event: 'register'
					},
				});
				if(res.code == 200) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
					clearInterval(this.getCode());
					let holdTime = 60; //定义变量并赋值
					this.codetext = "重新获取(60)"
					//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
					//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
					this.Timer = setInterval(() => {
						if (holdTime <= 0) {
							this.isDisabled = true;
							this.getCodeBtnColor = "#ffffff";
							this.codetext = "获取验证码"
							clearInterval(this.Timer); //清除该函数
							return; //返回前面
						}
						this.codetext = "重新获取(" + holdTime + ")"
						holdTime--;
					}, 1000)
				} else {
					this.isDisabled = true;
					this.getCodeBtnColor = "#ffffff";
					this.codetext = "获取验证码"
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "none"
					});
				}
			},
			//代理产品
			close() {
				this.show = false
				this.send_show = false
			},
			// 代理产品子组件传给父组件的值
			send(id, name) {
				this.agenttext = name
				this.agenttext_id = id
				this.send_show = false
			},
			// 获取代理列表
			async agent_list() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getProductList',
					data: {
						type: this.e.type,
						id: this.e.id
					}
				});
				this.agentlist = res.data
				this.agenttit = res.msg
			},
			//注册
			verify() {
				if (this.namex != '' && this.phone != '' && this.idcard != '') {
					this.register()
				} else {
					uni.showToast({
						title: '个人信息不全',
						duration: 2000,
						icon: "none"
					});
				}
			},
			async register() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'user/register',
					data: {
						real_name: this.namex, //姓名
						password: this.Login_pwd, //登陆密码
						mobile: this.phone, //手机号
						code: this.code, //验证码
						type: this.e.type, //类型：1=机构，2=代理（扫码获得）
						id: this.e.id, //机构或代理ID（扫码获得）
						company_id: this.e.company_id,
						id_card: this.idcard, //身份证号
						event: 'register', //验证码类型
						platform: this.platform
					}
				});
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: "none",
				});
				if (res.code == 200) {
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/holdon'
						})
					}, 2000)
				}
			},
			// 合同
			contract() {
				this.checked = true
				this.show = false
			},
			async _getAgree() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getAgree'
				});
				if (res.code == 200) {
					this.regis = res.data.register
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login_box {
		min-height: 100vh;
		padding: 70rpx;
		box-sizing: border-box;
		background-image: linear-gradient(#ecf5ff, #a0cfff);
		
		.login_logo {
			text-align: center;
			.login_img {
				width: 200rpx;
				height: 200rpx;
				margin: 0 auto;
			}
		}

		.input_box {
			background-color: #fff;
			border-radius: 15rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 40rpx;

			input {
				width: 90%;
				padding: 15rpx;
				height: 100rpx;
				box-sizing: border-box;
			}

			input:not(:last-child) {
				border-bottom: #dddddf solid 1px;
			}

			.yzm_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 90%;
				border-bottom: #dddddf solid 1px;

				input {
					width: 70%;
					border-bottom: none;
				}

				text {
					color: #2979ff;
					font-size: 24rpx;
					display: block;
					margin-right: 15rpx;
				}
			}
		}

		.login_button {
			background-color: #2979ff;
			width: 100%;
			border-radius: 15rpx;
			font-size: 28rpx;
			padding: 30rpx;
			box-sizing: border-box;
			color: #fff;
			text-align: center;
			margin-top: 45rpx;
			transition: all 0.5s;
		}

		.login_button:active {
			background-color: #9cd3d4;
		}

		.label {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #818181;

			text {
				color: #2979ff;
				font-size: 30rpx;
			}
		}

		.Modal {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(255, 255, 255, 0);

			.Modal_tit {
				position: absolute;
				top: 20%;
				bottom: 20%;
				left: 5%;
				right: 5%;
				overflow: hidden;
				overflow-y: auto;
				background-color: rgba(255, 255, 255, 1);
				border-top-left-radius: 15rpx;
				border-top-right-radius: 15rpx;
				display: block;
				padding: 35rpx 20rpx;
				padding-bottom: 0;

				h3 {
					text-align: center;
					margin-bottom: 30rpx;
				}
			}

			.Modal_cf {
				height: 80rpx;
				background-color: #fff;
				left: 5%;
				right: 5%;
				position: absolute;
				bottom: calc(20% - 80rpx);
				border-bottom-left-radius: 15rpx;
				border-bottom-right-radius: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-top: #dddddf 1px solid;
			}
		}
	}
</style>